import React from 'react';
import ReactDOM from 'react-dom';
import VisualHelper from "./VisualHelper";

class VisualBase{
  constructor(type='VisualBase'){
    this.type = type;

    var domElement = document.createElement('div');
    domElement.style.border = "1px solid #000000";
    domElement.style.margin = '2px';

    var helperNode  = document.createElement('div');
    domElement.appendChild(helperNode);
    this.helperNode = helperNode;

    const helper    = <VisualHelper  visual={this}/>;
    this.helper     = helper;

    this.domElement = domElement;
    this.attributes = {};
    // 初始化成员列表
    this.items = [];

    // 线样式
    this.lineStyle = {
      'dashed': [1,3],
      'solid' : [],
    }

    // 配置助手
    this.addAttribute('showHelper', false   , 'boolean' , '通用');

    this.onMouseDown  = this.onMouseDown.bind(this);
    this.onMouseMove  = this.onMouseMove.bind(this);
    this.onMouseUp    = this.onMouseUp.bind(this);

  }
  // 添加属性值
  // 属性名 属性值 属性类型 属性分组信息 是否为只读
  addAttribute(name, value, type='string', group='通用', readOnly = false){
    // this.attributes[name] = value;
    this.attributes[name] = {value: value, group:group, type:type, readOnly:readOnly};
    
    Object.defineProperty(this, name, {
      // value: value,
      // writable : !readOnly,
      get: function(){
        return this.attributes[name].value;
      },
      set: readOnly?undefined:function(val){
        this.attributes[name].value = val;
      },
      // configurable: true,
      // enumerable  : false,
    });
  }

  // 添加事件函数
  addEvent(name, callback, group='函数', readOnly = true){
    this.attributes[name] = {value:name, group:group, type:'promise', readOnly:readOnly};

    Object.defineProperty(this, name, {
      get: function(){
        return new Promise(callback);
      },
      set: readOnly?undefined:function(val){
        callback = val;
      },
    });
  }

  // 初始化输入事件
  initInput(){
    window.addEventListener('mousedown', this.onMouseDown, false);
    window.addEventListener('mousemove', this.onMouseMove, false);
    window.addEventListener('mouseup'  , this.onMouseUp, false);
  }
  // 取消输入事件
  removeInput(){
    window.removeEventListener('mousedown', this.onMouseDown, false);
    window.removeEventListener('mousemove', this.onMouseMove, false);
    window.removeEventListener('mouseup'  , this.onMouseUp  , false);
  }

  onMouseDown(){}
  onMouseMove(){}
  onMouseUp(){}

  // 属性列表字符串
  toString(){
    var str=`${this.type}\n`;
    for(var attribute in this.attributes){
      str += `${attribute}:${this.attributes[attribute].value}\n`;
    }
    return str;
  }

  // 渲染成员
  renderItems(){
    
  }

  update(){
    this.updateHelper();
  }

  clear(){}

  updateHelper(){
    ReactDOM.render(
      <React.StrictMode>
        {this.helper}
      </React.StrictMode>,
      this.helperNode
    )
  }

  updateVisual(attributes){
    for(var i=0, il=attributes.length; i < il; i++){
      if(attributes[i].readOnly) continue;

      const key = attributes[i].key;
      this[key] = attributes[i].value;
    }
    this.update();
  }
}

export default VisualBase;